<template>
  <div class="dialog">
    <nut-dialog teleport="#app" v-model:visible="isShow" :lock-scroll="true">
      <template #default>
        <div class="wrap">
          <!-- 标题(默认无) #title -->
          <slot name="title"></slot>

          <!-- 内容  #default -->
          <slot>
            <div class="dialog-content">确定删除该模块内容?</div>
          </slot>
        </div>
      </template>

      <template #footer v-if="btnCount == 1">
        <!-- 操作 #cancel #confirm -->
        <div class="dialog-action">
          <div class="action-item confirm" @click="handleConfirm">
            <slot name="confirm">确定</slot>
          </div>
        </div>
      </template>

      <template #footer v-if="btnCount == 2">
        <!-- 操作 #cancel #confirm -->
        <div class="dialog-action">
          <div class="action-item" @click="handleCancel">
            <slot name="cancel">取消</slot>
          </div>

          <div class="action-item confirm" @click="handleConfirm">
            <slot name="confirm">确定</slot>
          </div>
        </div>
      </template>
    </nut-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

// - props
const props = withDefaults(
  defineProps<{
    btnCount?: number | string;
    isAutoClose?: boolean;
  }>(),
  { btnCount: 2, isAutoClose: true }
);

// - data
const isShow = ref(false);

// - emit
const emit = defineEmits(["cancel", "confirm"]);

// - methods
const openDialog = () => {
  // stopMove()
  isShow.value = true;
};
const closeDialog = () => {
  // startMove()
  document.body.className = "";
  isShow.value = false;
};
const handleCancel = () => {
  emit("cancel");
  closeDialog();
};
const handleConfirm = () => {
  emit("confirm");
  props.isAutoClose && closeDialog();
};

defineExpose({ isShow, openDialog, closeDialog, handleCancel, handleConfirm });
</script>

<style lang="scss" scoped>
.dialog {
  .wrap {
    display: flex;
    flex-direction: column;
    width: 100%;

    .dialog-title {
      font-size: 36px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #000000;
      line-height: 50px;
      margin: 36px 0 30px 0;
    }

    .dialog-content {
      font-size: 36px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #000000;
      margin: auto;
    }
  }

  .dialog-action {
    display: flex;
    width: 100%;
    height: 100%;

    .action-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 32px;
      font-family: PingFang-SC-Regular, PingFang-SC;
      font-weight: 400;
      color: #999999;
      line-height: 45px;
    }
    .action-item:first-of-type {
      border-right: 1px solid #eeeeee;
    }
    .action-item.confirm {
      color: #40ae36;
    }
  }

  // - 修改弹窗默认样式
  :deep(.nut-dialog) {
    // width: 580px;
    min-height: 280px;
    background: #ffffff;
    padding: 0;

    // - 内容区域
    .nut-dialog__content {
      display: flex;
      justify-content: center;
      min-height: 180px;
      margin: 0;
      overflow: unset;
    }
    // - 按钮区域
    .nut-dialog__footer {
      height: 100px;
      border-top: 1px solid #eeeeee;
    }
  }
  :deep(.popup-center.round) {
    border-radius: 20px;
  }
}
</style>
